<script setup>
import usePager from '@/core/hooks/useRequestPager'
import emailSendApi from '@/api/log/EmailSendApi'
import TableActionBar from '@/components/TableActionBar.vue'

// 分页查询数据
const requsetService = () => {
  const searchData = { searchKey: 'search key', name: 'Ricky搜索' }
  return emailSendApi.getListByPage(searchData)
}
const {
  refresh,
  loading,
  dataSource,
  pagination
} = usePager(requsetService)
// 定义列表字段
const columns = [
  { title: 'ID', dataIndex: 'id', width: 100 },
  { title: '用户名', dataIndex: 'userId' },
  { title: '手机号', dataIndex: 'mobileNo' },
  { title: '客户端', dataIndex: 'clientInfo' },
  { title: '登录时间', dataIndex: 'loginOn' },
  { title: '登录IP', dataIndex: 'loginIp' },
  { title: '登录地区', dataIndex: 'loginIpArea' },
  // { title: 'Email', dataIndex: 'email' },
  { title: '状态', dataIndex: 'status' },
  { title: '信息', dataIndex: 'message' }

]
</script>
<template>
  <a-row :gutter="[16,16]">
    <a-col :span="24">
      <!-- 数据列表-->
      <a-table
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :row-key="record=>record.id">
        <!-- 标题 -->
        <template #title>
          <table-action-bar
            :actions="['refresh']"
            :on-refresh="refresh"
            :advanced="true" />
        </template>
        <!-- 字段 -->
        <template #bodyCell="{ column, record }">
          <!-- 状态 -->
          <template v-if="column.dataIndex === 'status'">
            <a-tag color="pink">{{ record.status }}</a-tag>
          </template>
        </template>
      </a-table>
      <!-- 表单 -->
    </a-col>
  </a-row>
</template>
